<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>option to add background image to SignaturePad library</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>


  <div id="signature-pad" class="signature-pad">
    <div class="signature-pad--body">
      <canvas>
        Update your browser to support the canvas element!
      </canvas>
    </div>
    <div class="signature-pad--footer">
      <div class="description">Sign above</div>

      <div class="signature-pad--actions">
        <form action="#" enctype="multipart/form-data">
          <label for="fileupload" id="buttonlabel">
            <span role="button" aria-controls="filename" tabindex="0">
              Choose a background image
            </span>
          </label>
          <input type="file" id="fileupload" accept="image/*">
        </form>
        <div>
          <button type="button" class="button clear" data-action="clear">Clear</button>
          <button type="button" class="button" data-action="change-color">Change color</button>
          <button type="button" class="button" data-action="undo">Undo</button>

        </div>
        <div>
          <button type="button" class="button save" data-action="save-png">Save as PNG</button>
          <button type="button" class="button save" data-action="save-jpg">Save as JPG</button>
          <button type="button" class="button save" data-action="save-svg">Save as SVG</button>
        </div>
      </div>
    </div>
  </div>

<script src='signature_pad.min.js'></script>
<script  src="./script.js"></script>

</body>
</html>
